<template>
  <div class="notice-card"
       :style="{ backgroundImage: `url(${backgroundImage})` }"
       @click="toDetail">
    <div class="head-wrap"
         :style="{ background: backgroundColor }">
      {{ typeText }}
    </div>
    <div class="title">{{ instance.title }}</div>
    <div class="author">转化人：{{ instance.licensor }}</div>
  </div>
</template>

<script>
export default {
  props: {
    instance: Object,
  },
  data() {
    return {
      backgroundImage: '',
      backgroundColor: '',
      typeText: '',
      texts: {
        0: '待转化',
        2: '质押',
        1: '许可',
        3: '转让',
      },
      colors: {
        0: '#89C997', // 转让
        1: '#6582FF', // 许可
        2: '#2279D2', // 质押
        3: '#FFC94D',
      },
    }
  },
  mounted() {
    this.initSetting()
  },
  methods: {
    initSetting() {
      const { operationType } = this.instance
      this.backgroundImage = `/static/notice${operationType}.png`
      this.backgroundColor = this.colors[operationType]
      this.typeText = this.texts[operationType]
    },
    toDetail() {
      this.$emit('toDetail', this.instance.id)
    },
  },
}
</script>
